If problems occur when using truncation with elements that use flexbox, you might need to add the .slds-has-flexi-truncate class on the flexbox child node ( .slds-col or .slds-col_padded elements) that contains the truncated text.
Note: There is an iOS bug that is triggered when you add a component from Visualforce into S1 using an iFrame. The truncated element does not recognize its width.
Overview of CSS Classes
The CSS class being referred to.
A description of what the class does.
Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
The selector that the class name is allowed to be used on.
The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Needed when truncation is nested in a flexible container in a grid